<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <div class="channel-wrap">
      <div class="title">
        <span>我的频道</span>
        <van-button
          plain
          type="danger"
          size="small"
          @click="isEdit = !isEdit"
          >{{ isEdit ? "取消" : "编辑" }}</van-button
        >
      </div>
      <van-grid>
        <van-grid-item v-for="(item, index) in channellist" :key="item.id">
          <span
            @click="intoChannel(index)"
            :class="{ active: index == value }"
            >{{ item.name }}</span
          >
          <van-icon
            class="del-icon"
            v-if="isEdit && index"
            @click="delChannel(index, item)"
            name="cross"
          />
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 其他频道 -->
    <div class="channel-wrap">
      <div class="title">
        <span>其他频道</span>
      </div>
      <van-grid>
        <van-grid-item
          v-for="item in opotionchannel"
          :key="item.id"
          :text="item.name"
          @click="addChannel(item)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { setChannel } from "@/utils/storage";
import { addChannelAPI, delChannelAPI } from "@/api";
export default {
  props: {
    channellist: {
      type: Array,
      required: true,
    },
    allChannels: {
      tyep: Array,
      required: true,
    },
    value: {
      type: Number,
    },
  },
  data() {
    return {
      isEdit: false,
    };
  },
  computed: {
    opotionchannel() {
      //  this.allChannels=[...allChannels, ...channellist];
      //this.allChannels= [ ...new Set(this.allChannels,) ]
      return this.allChannels.filter(
        (value) => this.channellist.findIndex((v) => v.id == value.id) == -1
      );
    },
  },
  methods: {
    intoChannel(index) {
      // console.log(index);
      this.$emit("input", index);
      this.$emit("close");
    },
    // 添加视屏
    async addChannel(item) {
      // console.log(item);

      this.channellist.push(item);
      // 代表登录了
      if (this.$store.state.tokenObj.token) {
        await addChannelAPI({
          channels: [{ id: item.id, seq: this.channellist.length + 1 }],
        });
      } else {
        setChannel(this.channellist);
      }
    },
    // 删除视频
    async delChannel(index, item) {
    this.channellist.splice(index, 1);
      if (index < this.value) {
        this.$emit("input", this.value - 1);
      }
      // 判断是否登录
      if (this.$store.state.tokenObj.token) {
        await delChannelAPI(
         item.id,
        )
      }else {

        // 没登录
        // 把剩余的我的频道数组保存到本地存储就行了
        setChannel(this.channellist)
      }
      
    },
  },
};
</script>

<style lang="less" scoped>
.channel-edit {
  padding: 0 20px;
  .channel-wrap {
    .title {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .del-icon {
      position: absolute;
      top: 5px;
      right: 5px;
    }
  }
  .active {
    color: red;
  }
}
</style>